<template>
  <el-dialog
    append-to-body
    :title="title"
    :visible.sync="dialogVisible"
    width="1000px"
    @close="close"
  >
    <el-form
      ref="form"
      label-suffix="："
      label-width="128px"
      :model="form"
      :rules="rules"
    >
      <el-divider content-position="left">
        <span class="color-primary font-bold">主要信息</span>
      </el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="原始血袋号" prop="id_out">
            <el-input
              v-model.trim="form.id_out"
              clearable
              placeholder="原始血袋号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="血液成分" prop="product_id_path">
            <el-cascader
              v-model="form.product_id_path"
              class="wd200"
              clearable
              filterable
              :options="products"
              :props="props"
              :show-all-levels="false"
              size="mini"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="血型" prop="abo">
            <el-select
              v-model="form.abo"
              class="wd200"
              clearable
              filterable
              placeholder="血型"
              size="mini"
            >
              <el-option
                v-for="(item, index) in bloodGroups"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="Rh(D)" prop="rhd">
            <el-select
              v-model="form.rhd"
              class="wd200"
              clearable
              filterable
              placeholder="Rh(D)"
              size="mini"
            >
              <el-option
                v-for="(item, index) in bloodRhds"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="血量" prop="capacity">
            <el-input-number
              v-model="form.capacity"
              controls-position="right"
              :min="0.5"
              placeholder="血量"
              size="mini"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="采血时间" prop="collect_time">
            <el-date-picker
              v-model="form.collect_time"
              align="center"
              class="wd200"
              placeholder="选择日期时间"
              size="mini"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="失效时间" prop="invalid_time">
            <el-date-picker
              v-model="form.invalid_time"
              align="center"
              class="wd200"
              placeholder="选择日期时间"
              size="mini"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="申请单号" prop="apply_num">
            <el-input
              v-model.trim="form.apply_num"
              clearable
              placeholder="申请单号"
            />
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="血源" prop="from">
            <el-select
              v-model="form.from"
              class="wd200 mr12"
              clearable
              filterable
              placeholder="血源"
            >
              <el-option
                v-for="(item, index) in bloodSourcesFilter"
                :key="index"
                :label="item.name"
                :value="item.name_his"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="h12"></div>
      <el-divider content-position="left">
        <span class="color-primary font-bold">扫码信息</span>
      </el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="血型码" prop="abo_code">
            <el-input
              v-model="form.abo_code"
              class="wd200"
              clearable
              filterable
              placeholder="血型码"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="血液成分码" prop="product_code">
            <el-input
              v-model="form.product_code"
              class="wd200"
              clearable
              filterable
              placeholder="血液成分码"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="失效日期码" prop="invalid_time_code">
            <el-input
              v-model="form.invalid_time_code"
              class="wd200"
              clearable
              filterable
              placeholder="失效日期码"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="h12"></div>
      <el-form-item>
        <el-button type="primary" @click="submit('mainForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { deepClone } from '@/utils'
  // import { getAll } from '@/api/bloodSource'
  export default {
    data() {
      return {
        blood_id: '',
        activeName: 'first',
        dialogVisible: false,
        title: '血液修改',
        form: {},
        props: { label: 'name', value: 'id' },
        rules: {
          product_id_path: [
            { required: true, trigger: 'blur', message: '血液成分必须' },
          ],
          invalid_time: [
            { required: true, trigger: 'blur', message: '失效日期必须' },
          ],
        },
        bloodGroups: ['A', 'B', 'AB', 'O'],
        bloodRhds: ['阳性', '阴性'],
      }
    },
    computed: {
      ...mapGetters(['products', 'bloodSources']),
      bloodSourcesFilter() {
        return this.bloodSources.filter((val) => {
          return (
            val.name.indexOf('自采') === -1 && val.name.indexOf('自体') === -1
          )
        })
      },
    },
    methods: {
      // async getAll() {
      //   let {
      //     data: { data },
      //   } = await getAll({ pagesize: 100, order: 'idx asc' })
      //   this.bloodSources = data.filter((val) => {
      //     return (
      //       val.name.indexOf('自采') === -1 && val.name.indexOf('自体') === -1
      //     )
      //   })
      // },
      close() {
        this.form = {}
        this.dialogVisible = false
        this.activeName = 'first'
      },
      show(row) {
        // this.getAll()
        this.form = deepClone(row)
        this.blood_id = row.id
        this.dialogVisible = true
      },
      submit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.dialogVisible = false
            const fields = [
              'id',
              'id_out',
              'abo',
              'rhd',
              'from',
              'apply_num',
              'capacity',
              'collect_time',
              'invalid_time',
              'position',
              'product_id_path',
              'abo_code',
              'product_code',
              'invalid_time_code',
            ]
            let form = {}
            fields.forEach((item) => {
              form[item] = this.form[item]
            })
            form.product_id = form.product_id_path[1]
            this.$emit('submit', this.form.id, form)
          } else {
            return false
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped></style>
